<template>
  <!-- 还款 -->
  <el-dialog
    v-model="dialogVisible"
    title="还款"
    width="60%"
    :before-close="handleClose"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      status-icon
    >
      <el-row
        :gutter="24"
        v-for="(item, index) in ruleForm.list"
        :key="index"
        class="mb-lg"
      >
        <el-col :span="24" v-if="ruleForm.list.length > 1">
          <span>车辆-{{ index + 1 }}</span>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆信息：">
            <span v-for="(d, j) in k" :key="j"> {{ item[d] }}&nbsp; </span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车架号：">
            {{ item.vin }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="还款凭证："
            :prop="'list.' + index + '.payProofUrl'"
            :rules="rules.payProofUrl"
          >
            <c-file-upload
              :limit="1"
              v-if="!disabled"
              v-model="item.payProofUrl"
              type="String"
            >
              <span class="c-blue">上传还款凭证</span>
            </c-file-upload>
            <span class="c-blue pointer" v-else @click="onFileOpen(item.payProofUrl)"
              >查看还款凭证</span
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button size="large" :loading="buttonLoading" @click="handleClose"
        >取消</el-button
      >
      <el-button
        v-if="!disabled"
        size="large"
        :loading="buttonLoading"
        type="primary"
        @click="handleSubmit"
      >
        确认
      </el-button>
    </template>
  </el-dialog>
</template>
<script setup>
const k = ["brand", "series", "model"];
import { ref, getCurrentInstance } from "vue";
import cFileUpload from "@/components/Upload/FileUpload.vue";
import { ElMessage } from "element-plus";
import { deepClone ,onFileOpen} from "@/utils/index.js";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["change"]);
const dialogVisible = ref(false);
const disabled = ref(false);
const buttonLoading = ref(false);
const ruleFormRef = ref();
const ruleForm = ref({
  list: [],
});
const rules = ref({
  payProofUrl: [
    {
      required: true,
      message: "请选择还款凭证",
      trigger: "change",
    },
  ],
});

const handleOpen = (data, type) => {
  // type 0 列表点进来的单个   1 批量点进来的
  if (type === 0 && data[0].status !== 0) {
    disabled.value = true;
  }
  dialogVisible.value = true;
  ruleForm.value.list = deepClone(data);
};

const handleSubmit = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      buttonLoading.value = true;
      const data = deepClone(ruleForm.value).list.map(x=>{
        return {
          id:x.id,
          file:x.payProofUrl
        }
      });
      const url = "/sellerLoan/batchRepayment";
      console.log(data);
      try {
        await proxy.$post({ url, data });
        buttonLoading.value = false;
        ElMessage.success("操作成功");
        handleClose();
        emits("change");
      } catch (error) {
        buttonLoading.value = false;
      }
    }
  });
};
const handleClose = () => {
  ruleForm.value = {
    list: [],
  };
  dialogVisible.value = false;
  ruleFormRef.value.resetFields();
};
defineExpose({
  handleOpen,
});
</script>

